<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="商品" prop="commodityNumbers">
          <el-select v-model="queryParams.commodityNumbers" multiple placeholder="请选择">
            <el-option
              v-for="item in products"
              :key="item.commodityNumber"
              :label="item.cartTitle"
              :value="item.commodityNumber">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            unlink-panels
            :clearable="false"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['service:sales:add']"
          >新增</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="list" >
        <el-table-column label="商品编码" prop="commodityNumber" align="center" />
        <el-table-column label="商品名称" prop="cartTitle" align="center" />
        <el-table-column label="销量" prop="salesVolume" align="center" />
        <el-table-column label="供应商名称" prop="supplierName" align="center" />
        <el-table-column label="销售额" prop="salesAmount" align="center" />
        <el-table-column label="创建人" prop="createBy" align="center" />
        <el-table-column label="创建时间" prop="createTime" align="center" />
        <el-table-column label="更新人" prop="updateBy" align="center" />
        <el-table-column label="更新时间" prop="updateTime" align="center" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 添加或修改岗位对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="名称" prop="supplierName">
            <el-select v-model="form.commodityNumber" placeholder="请选择">
              <el-option
                v-for="item in products"
                :key="item.commodityNumber"
                :label="item.cartTitle"
                :value="item.commodityNumber">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="salesVolume">
            <el-input v-model="form.salesVolume" placeholder="请输入数量" type="number"/>
          </el-form-item>
          <el-form-item label="单价" prop="unitPrice">
            <el-input v-model="form.unitPrice" placeholder="请输入单价"  onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"/>
          </el-form-item>
          <el-form-item label="销售额" prop="unitPrice">
            <el-input v-model="form.salesVolume * form.unitPrice" disabled/>
          </el-form-item>
          <el-form-item label="备注" prop="unitPrice">
            <el-input v-model="form.remarks"  type="textarea"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { list, add, getSelection } from "@/api/service/sales"
  export default {
    name: 'index',
    dicts:[],
    data(){
      return{
        pickerOptions: {
          shortcuts: [
            {
              text: '当天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            },{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 岗位表格数据
        list: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        products:[],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          commodityNumbers:[]
        },
        // 表单参数
        form: {
          commoditySalesId:'',
          salesVolume:0,
          unitPrice:0.0,
          salesAmount:0.0
        },
        rules: {

        }
      }
    },
    created() {
      this.select()
      this.getList();
    },
    methods: {
      select(){
        getSelection().then(res =>{
          this.products = res.data
        })
      },
      /** 查询岗位列表 */
      getList() {
        this.loading = true;
        list(this.addDateRange(this.queryParams, this.dateRange)).then(res =>{
          this.list = res.rows;
          this.total = res.total;
          this.loading = false;
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {}
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加销售记录";
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.commoditySalesId != undefined) {

            }else{
              add(this.form).then(res => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
